<template>
  <div style="margin-bottom:5px;">
    <div class="left-col">{{ name }}</div>
    <div class="right-col filter-list-wrapper">
      <ul class="filter-list">
        <li v-if="!hideAll" :class="{ selected: !value }" @click="onSelect()">å…¨éƒ¨</li>
        <li
          :class="{ selected: item.value === value }"
          v-for="(item, index) in limitList"
          :key="index"
          @click="onSelect(item)"
        >
          {{ item.label }}
        </li>
        <li
          v-if="checkOptions.length > 0"
          class="filter-more"
          :class="{ 'more-selected': selectedMore }"
          v-popover:popover
        >
          <span>æ›´å¤š<i class="el-icon-d-arrow-left" :class="{ rotate: show }"></i> </span>
        </li>
      </ul>
    </div>
    <el-popover
      ref="popover"
      v-model="show"
      popper-class="select-filter-popover"
      placement="bottom"
      trigger="click"
    >
      <ul>
        <li
          v-for="(item, index) in checkOptions"
          :key="index"
          :class="{ selected: item.value === value }"
          @click="onSelect(item)"
        >
          {{ item.label }}
        </li>
      </ul>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: ['name', 'list', 'value', 'limitCount', 'hideAll'],
  data() {
    return { show: false };
  },
  computed: {
    limitList() {
      return this.list.slice(0, this.limitCount);
    },
    checkOptions() {
      return this.list.slice(this.limitCount || this.list.length);
    },
    selectedMore() {
      return this.checkOptions.findIndex(item => item.value === this.value) > -1;
    }
  },
  methods: {
    onSelect(item) {
      let value = item.value;
      if (this.value === value) {
        value = '';
      }
      this.$emit('update:value', item ? value : '');
      console.log('filter', this.name + this.value);
      this.$emit('onChange');
    }
  }
};
</script>
